<template>
  <view class="history-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="page-title">记录</view>
    </view>
    
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-dropdown" :class="{'active': filterType === 'all'}" @tap="changeFilter('all')">
        <text>全部</text>
        <text class="dropdown-icon">▼</text>
      </view>
      <view class="filter-dropdown" :class="{'active': filterType !== 'all'}" @tap="showFilterOptions">
        <text>筛选</text>
        <text class="dropdown-icon">▼</text>
      </view>
      <text class="batch-manage" @tap="toggleBatchManage">{{ isBatchManage ? '完成' : '批量管理' }}</text>
    </view>
    
    <!-- 记录列表 -->
    <scroll-view class="record-list" scroll-y="true" @scrolltolower="loadMoreRecords" :style="{ height: scrollHeight + 'px' }">
      <!-- 加载中提示 -->
      <view v-if="loading && !historyList.length" class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载历史记录中...</text>
      </view>
      
      <!-- 无数据提示 -->
      <view v-if="!loading && !historyList.length" class="empty-container">
        <view class="empty-icon">📋</view>
        <text class="empty-text">暂无试衣记录</text>
        <view class="try-button" @tap="goToTryOn">去试衣</view>
      </view>
      
      <!-- 记录列表内容 -->
      <block v-for="(monthData, monthIndex) in groupedHistoryList" :key="monthIndex">
        <view class="month-section">
          <view class="month-header">{{ monthData.month }}</view>
          
          <view 
            class="record-item" 
            v-for="(item, index) in monthData.records" 
            :key="item.id" 
            @tap="viewDetail(item)"
          >
            <view class="record-title">
              <text class="record-type">{{ item.title }}</text>
              <text class="record-date">{{ item.date }}</text>
              <view 
                v-if="isBatchManage" 
                class="select-checkbox" 
                @tap.stop="toggleSelect(item.id)"
                :class="{'selected': selectedIds.includes(item.id)}"
              ></view>
            </view>
            <view class="outfit-gallery">
              <!-- 左侧图片（clothes_url） -->
              <view class="outfit-image">
                <image :src="item.clothes_url || defaultImgUrl" mode="aspectFill" @error="handleImageError($event, 'clothes')"></image>
              </view>
              <!-- 右侧图片（image_url） -->
              <view class="outfit-image">
                <image :src="item.image_url || defaultImgUrl" mode="aspectFill" @error="handleImageError($event, 'image')"></image>
              </view>
            </view>
            <view class="tag-container">
              <view 
                v-for="(tag, tagIndex) in getTagsList(item.suitable)" 
                :key="'tag-s-' + tagIndex" 
                class="tag" 
                :class="{'pink-tag': tag.type === 'highlight'}"
              >{{ tag.name }}</view>
              
              <!-- 添加不适合的标签 -->
              <view 
                v-for="(tag, tagIndex) in getTagsList(item.not_suitable)" 
                :key="'tag-n-' + tagIndex" 
                class="tag gray-tag"
              >{{ tag.name }}</view>
              
              <view class="review-btn" @tap.stop="viewDetail(item)">查看详情</view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 底部加载更多 -->
      <view v-if="historyList.length && hasMoreData" class="loading-more">
        <view class="loading-spinner small"></view>
        <text>加载更多...</text>
      </view>
      
      <view v-if="historyList.length && !hasMoreData" class="no-more-data">
        <text>— 已经到底了 —</text>
      </view>
    </scroll-view>
    
    <!-- 批量管理操作条 -->
    <view class="batch-actions" v-if="isBatchManage">
      <view class="select-all" @tap="toggleSelectAll">
        <view class="select-checkbox" :class="{'selected': isAllSelected}"></view>
        <text>全选</text>
      </view>
      <view class="delete-btn" @tap="deleteSelected" :class="{'disabled': !selectedIds.length}">
        <text>删除</text>
      </view>
    </view>
    
    <!-- 底部导航 -->
    <view class="bottom-tabs" :style="{ paddingBottom: safeAreaBottom + 'px' }" v-if="!isBatchManage">
      <view class="tab-item" :class="{'active': navTab === 0}" @tap="navSwitchTab(0)">
        <view class="tab-icon">🏠</view>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" :class="{'active': navTab === 1}" @tap="navSwitchTab(1)">
        <view class="tab-icon">👚</view>
        <text class="tab-text">个人衣橱</text>
      </view>
      <view class="tab-item" :class="{'active': navTab === 2}" @tap="navSwitchTab(2)">
        <view class="tab-icon">📋</view>
        <text class="tab-text">记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20,
      safeAreaBottom: 0,
      defaultImgUrl: '/static/easy-loadimage/loading.png',
      navTab: 2, // 默认为2，表示当前在记录页面
      
      // 新增数据字段
      historyList: [], // 原始历史记录列表
      loading: false, // 加载状态
      page: 1, // 当前页数
      limit: 10, // 每页条数
      hasMoreData: true, // 是否有更多数据
      scrollHeight: 0, // 滚动区域高度
      
      // 筛选相关
      filterType: 'all', // 筛选类型
      
      // 批量管理相关
      isBatchManage: false, // 是否处于批量管理状态
      selectedIds: [], // 已选中的ID列表
      isAllSelected: false, // 是否全选
    }
  },
  computed: {
    // 将历史记录按月份分组
    groupedHistoryList() {
      if (!this.historyList.length) return [];
      
      const groups = {};
      
      this.historyList.forEach(item => {
        // 提取月份信息
        const date = this.parseDate(item.date);
        const monthKey = this.isCurrentMonth(date) ? '本月' : '上个月';
        
        if (!groups[monthKey]) {
          groups[monthKey] = {
            month: monthKey,
            records: []
          };
        }
        
        groups[monthKey].records.push(item);
      });
      
      // 转换为数组并按月份排序
      return Object.values(groups).sort((a, b) => {
        if (a.month === '本月') return -1;
        if (b.month === '本月') return 1;
        return 0;
      });
    }
  },
  onLoad() {
    this.getSystemInfo();
    this.navTab = 2;
    this.calculateScrollHeight();
    this.loadHistoryRecords();
  },
  onShow() {
    this.navTab = 2;
    
    // 如果从详情页返回，可能需要刷新数据
    if (getApp().globalData.needRefreshHistory) {
      this.page = 1;
      this.historyList = [];
      this.hasMoreData = true;
      this.loadHistoryRecords();
      getApp().globalData.needRefreshHistory = false;
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.page = 1;
    this.historyList = [];
    this.hasMoreData = true;
    this.loadHistoryRecords(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      try {
        // 使用推荐的新API替代弃用的getSystemInfoSync
        const systemInfo = uni.getWindowInfo();
        this.statusBarHeight = systemInfo.statusBarHeight || 20;
        this.safeAreaBottom = systemInfo.safeAreaInsets 
          ? systemInfo.safeAreaInsets.bottom 
          : 0;
      } catch (e) {
        console.error('获取系统信息失败', e);
      }
    },
    
    // 计算滚动区域高度
    calculateScrollHeight() {
      try {
        // 使用推荐的新API
        const systemInfo = uni.getWindowInfo();
        const windowHeight = systemInfo.windowHeight;
        
        // 计算其他区域的高度
        const statusBarHeight = this.statusBarHeight;
        const navHeight = 90; // 导航栏高度
        const filterBarHeight = 64; // 筛选栏高度
        const tabsHeight = 50 + this.safeAreaBottom; // 底部导航栏高度
        
        // 计算滚动区域高度
        this.scrollHeight = windowHeight - statusBarHeight - navHeight - filterBarHeight - tabsHeight;
      } catch (e) {
        console.error('计算滚动高度失败', e);
        this.scrollHeight = 500; // 设置默认高度
      }
    },
    
    // 加载历史记录
    loadHistoryRecords(callback) {
      if (this.loading || (!this.hasMoreData && this.page > 1)) {
        if (callback) callback();
        return;
      }
      
      this.loading = true;
      
      // 严格按照API文档规范构建请求参数
      const params = {
        page: this.page,
        limit: this.limit,
        keyword: '' // 搜索关键词，默认为空
      };
      
      // 如果有筛选条件，添加到参数中
      if (this.filterType !== 'all') {
        params.type = this.filterType;
      }
      
      console.log('获取历史记录参数:', JSON.stringify(params, null, 2));
      
      // 使用项目实际的API域名
      const apiBaseUrl = 'https://zysemtime.com';
      
      // 获取全局配置的URL，如果为空则使用硬编码值
      const globalBaseUrl = getApp().globalData.HTTP_REQUEST_URL;
      console.log('全局配置的基础URL:', globalBaseUrl);
      
      // 如果全局URL存在，则使用全局URL，否则使用硬编码的URL
      const fullApiUrl = globalBaseUrl ? (globalBaseUrl + '/api/dress_history/list') : (apiBaseUrl + '/api/dress_history/list');
      console.log('使用的完整API URL:', fullApiUrl);
      
      uni.request({
        url: fullApiUrl,
        method: 'GET',
        header: {
          'Authorization': uni.getStorageSync('token')
        },
        data: params,
        success: (res) => {
          console.log('获取历史记录成功:', JSON.stringify(res.data, null, 2));
          
          if (res.data && res.data.code === 200 && res.data.data) {
            // 处理数据
            const records = res.data.data.data || [];
            
            // 处理每条记录的数据格式，确保字段名称正确
            const formattedRecords = records.map(item => {
              // 格式化日期字段，将create_time转换为date字段
              const dateStr = item.create_time || '';
              const formattedDate = dateStr.split(' ')[0].replace(/\d{4}-/, ''); // 从"2025-04-21 15:21:27"提取为"04-21"
              
              return {
                ...item,
                date: formattedDate, // 添加date字段用于显示
                suitable: item.suitable || '',
                not_suitable: item.not_suitable || ''
              };
            });
            
            // 如果是第一页，则覆盖现有数据，否则追加
            if (this.page === 1) {
              this.historyList = formattedRecords;
            } else {
              this.historyList = [...this.historyList, ...formattedRecords];
            }
            
            // 判断是否还有更多数据
            const totalPages = res.data.data.last_page || 1;
            this.hasMoreData = this.page < totalPages;
            
            // 页码自增
            if (formattedRecords.length > 0) {
              this.page++;
            }
          } else {
            // 处理错误情况
            if (res.data && res.data.code === 401) {
              uni.showToast({
                title: '请先登录',
                icon: 'none',
                duration: 2000
              });
            } else {
              uni.showToast({
                title: res.data?.message || '获取历史记录失败',
                icon: 'none',
                duration: 2000
              });
            }
          }
        },
        fail: (err) => {
          console.error('获取历史记录失败:', err);
          console.error('错误详情:', JSON.stringify(err, null, 2));
          
          uni.showToast({
            title: '网络请求失败，请稍后再试',
            icon: 'none',
            duration: 2000
          });
        },
        complete: () => {
          this.loading = false;
          if (callback) callback();
        }
      });
    },
    
    // 加载更多记录
    loadMoreRecords() {
      if (this.hasMoreData && !this.loading) {
        this.loadHistoryRecords();
      }
    },
    
    // 查看详情
    viewDetail(item) {
      if (this.isBatchManage) {
        this.toggleSelect(item.id);
        return;
      }
      
      uni.navigateTo({
        url: `/pages/AI_try_on/history_detail?id=${item.id}`
      });
    },
    
    // 去试衣页面
    goToTryOn() {
      uni.redirectTo({
        url: '/pages/AI_try_on/new_tryai'
      });
    },
    
    // 处理图片加载错误
    handleImageError(e, type) {
      console.log(`${type}图片加载失败`, e);
      // 设置默认图片
      const defaultImg = '/static/easy-loadimage/loading.png';
      
      // 获取当前图片元素
      const currentTarget = e.currentTarget;
      if (currentTarget) {
        // 在小程序环境中，通过currentTarget更新图片src
        currentTarget.src = defaultImg;
      }
    },
    
    // 导航切换
    navSwitchTab(tabIndex) {
      if (this.navTab === tabIndex) return;
      
      this.navTab = tabIndex;
      
      switch(tabIndex) {
        case 0: // 首页
          uni.switchTab({
            url: '/pages/AI_try_on/new_tryai'
          });
          break;
        case 1: // 个人衣橱
          uni.switchTab({
            url: '/pages/AI_try_on/personal_wardrobe'
          });
          break;
        case 2: // 记录 - 当前页面，不需要跳转
          break;
      }
    },
    
    // 切换批量管理状态
    toggleBatchManage() {
      this.isBatchManage = !this.isBatchManage;
      // 退出批量管理时清空选择
      if (!this.isBatchManage) {
        this.selectedIds = [];
        this.isAllSelected = false;
      }
      
      // 重新计算滚动区域高度
      setTimeout(() => {
        this.calculateScrollHeight();
      }, 50);
    },
    
    // 切换选中状态
    toggleSelect(id) {
      const index = this.selectedIds.indexOf(id);
      if (index > -1) {
        this.selectedIds.splice(index, 1);
      } else {
        this.selectedIds.push(id);
      }
      
      // 检查是否全选
      this.isAllSelected = this.historyList.length > 0 && this.selectedIds.length === this.historyList.length;
    },
    
    // 切换全选状态
    toggleSelectAll() {
      if (this.isAllSelected) {
        // 取消全选
        this.selectedIds = [];
        this.isAllSelected = false;
      } else {
        // 全选
        this.selectedIds = this.historyList.map(item => item.id);
        this.isAllSelected = true;
      }
    },
    
    // 删除选中的记录
    deleteSelected() {
      if (!this.selectedIds.length) return;
      
      uni.showModal({
        title: '确认删除',
        content: `确定要删除已选中的${this.selectedIds.length}条记录吗？`,
        confirmColor: '#ff5c8d',
        success: (res) => {
          if (res.confirm) {
            this.performDelete();
          }
        }
      });
    },
    
    // 执行删除操作
    performDelete() {
      const deletePromises = this.selectedIds.map(id => {
        return new Promise((resolve, reject) => {
          // 修复API请求URL，使用完整的基础URL
          const baseUrl = getApp().globalData.HTTP_REQUEST_URL || '';
          
          uni.request({
            url: `${baseUrl}/api/dress_history/delete/${id}`,
            method: 'DELETE',
            header: {
              'Authorization': uni.getStorageSync('token')
            },
            success: (res) => {
              if (res.data && res.data.code === 200) {
                resolve(id);
              } else {
                reject(res.data?.message || '删除失败');
              }
            },
            fail: (err) => {
              reject('网络请求失败');
            }
          });
        });
      });
      
      // 显示加载中
      uni.showLoading({
        title: '删除中...'
      });
      
      Promise.all(deletePromises)
        .then(deletedIds => {
          // 删除成功，更新列表
          this.historyList = this.historyList.filter(item => !deletedIds.includes(item.id));
          this.selectedIds = [];
          this.isAllSelected = false;
          
          uni.hideLoading();
          uni.showToast({
            title: `成功删除${deletedIds.length}条记录`,
            icon: 'success',
            duration: 2000
          });
          
          // 如果删除后列表为空，且有更多页，加载下一页数据
          if (this.historyList.length === 0 && this.hasMoreData) {
            this.loadHistoryRecords();
          }
        })
        .catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: error || '删除失败',
            icon: 'none',
            duration: 2000
          });
        });
    },
    
    // 显示筛选选项
    showFilterOptions() {
      uni.showActionSheet({
        itemList: ['全部', '约会穿搭', '休闲穿搭', '商务穿搭', '聚会穿搭'],
        success: (res) => {
          const selected = res.tapIndex;
          const filterTypes = ['all', 'date', 'casual', 'business', 'party'];
          
          // 设置筛选类型
          this.filterType = filterTypes[selected];
          
          // 重置页码并重新加载数据
          this.page = 1;
          this.historyList = [];
          this.hasMoreData = true;
          this.loadHistoryRecords();
        }
      });
    },
    
    // 更改筛选类型
    changeFilter(type) {
      if (this.filterType === type) return;
      
      this.filterType = type;
      this.page = 1;
      this.historyList = [];
      this.hasMoreData = true;
      this.loadHistoryRecords();
    },
    
    // 解析日期字符串
    parseDate(dateStr) {
      if (!dateStr) return new Date(); // 处理空值情况
      
      try {
        // 处理"MM-DD"格式的日期
        const now = new Date();
        const year = now.getFullYear();
        
        // 如果包含空格，表示是带时间的格式，先提取日期部分
        const datePart = dateStr.includes(' ') ? dateStr.split(' ')[0] : dateStr;
        
        // 如果是yyyy-MM-DD格式，去掉年份部分
        const dateWithoutYear = datePart.includes('-') ? 
          datePart.replace(/^\d{4}-/, '') : datePart;
        
        // 分割月日
        const parts = dateWithoutYear.split('-');
        if (parts.length !== 2) return new Date(); // 格式不对时返回当前日期
        
        const [month, day] = parts.map(Number);
        return new Date(year, month - 1, day);
      } catch (e) {
        console.error('日期解析出错:', e, dateStr);
        return new Date(); // 出错时返回当前日期
      }
    },
    
    // 判断是否为当前月份
    isCurrentMonth(date) {
      const now = new Date();
      return date.getMonth() === now.getMonth();
    },
    
    // 获取标签列表
    getTagsList(tagsString) {
      if (!tagsString) return [];
      
      try {
        // 尝试解析JSON字符串
        let tags = [];
        
        if (typeof tagsString === 'string') {
          // 尝试解析JSON字符串
          try {
            tags = JSON.parse(tagsString);
          } catch (e) {
            // 如果解析失败，检查是否为逗号分隔的字符串
            if (tagsString.includes(',')) {
              tags = tagsString.split(',').map(tag => ({ name: tag.trim(), type: 'normal' }));
            } else {
              // 单个标签
              tags = [{ name: tagsString.trim(), type: 'normal' }];
            }
          }
        } else if (Array.isArray(tagsString)) {
          // 已经是数组格式
          tags = tagsString;
        }
        
        // 确保每个标签都有正确的格式
        return tags.map(tag => {
          if (typeof tag === 'string') {
            return { name: tag, type: 'normal' };
          } else if (typeof tag === 'object' && tag !== null) {
            return { 
              name: tag.name || '未知', 
              type: tag.type || 'normal' 
            };
          }
          return { name: '未知标签', type: 'normal' };
        });
      } catch (e) {
        console.error('解析标签出错:', e);
        return [];
      }
    }
  }
}
</script>

<style lang="scss">
.history-container {
  min-height: 100vh;
  background-color: #fff5f8;
  display: flex;
  flex-direction: column;
  padding-bottom: 150rpx; // 为底部导航留出空间
}

.status-bar {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.nav-header {
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  position: relative;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 1.5rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1rpx solid rgba(240, 240, 240, 0.8);
}

.filter-dropdown {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  background: rgba(248, 248, 248, 0.8);
  padding: 12rpx 22rpx;
  border-radius: 30rpx;
  transition: all 0.25s ease;
}

.filter-dropdown.active {
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(255, 77, 125, 0.15);
}

.dropdown-icon {
  font-size: 20rpx;
  margin-left: 8rpx;
  opacity: 0.8;
}

.batch-manage {
  font-size: 26rpx;
  color: #ff6b9d;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  opacity: 0.9;
}

.record-list {
  flex: 1;
  overflow: hidden;
}

.month-section {
  padding: 22rpx 30rpx;
}

.month-header {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(238, 238, 238, 0.8);
  font-weight: 500;
  letter-spacing: 0.5rpx;
}

.record-item {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 24rpx 0;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
  position: relative;
}

.record-item:active {
  transform: scale(0.98);
}

.record-title {
  display: flex;
  align-items: center;
  margin-bottom: 22rpx;
}

.record-type {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  letter-spacing: 0.5rpx;
}

.record-date {
  font-size: 24rpx;
  color: #999;
  opacity: 0.9;
  margin-right: 10rpx;
}

.outfit-gallery {
  display: flex;
  margin: 0 -10rpx;
  justify-content: space-between;
}

.outfit-image {
  flex: 0.48;
  height: 300rpx;
  margin: 0 10rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.outfit-image image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.outfit-image:active image {
  transform: scale(1.03);
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22rpx;
}

.tag {
  font-size: 22rpx;
  color: #666;
  background-color: rgba(245, 245, 245, 0.8);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  letter-spacing: 0.5rpx;
}

.pink-tag {
  color: #ff6b9d;
  background-color: rgba(255, 236, 242, 0.8);
}

.blue-tag {
  color: #3a86ff;
  background-color: rgba(236, 242, 255, 0.8);
}

.green-tag {
  color: #2ecc71;
  background-color: rgba(236, 255, 242, 0.8);
}

.gray-tag {
  color: #999;
  background-color: rgba(245, 245, 245, 0.8);
}

.review-btn {
  font-size: 22rpx;
  color: #ff6b9d;
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  opacity: 0.9;
  padding: 8rpx 0;
}

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  border-top: 1px solid rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(10px);
  z-index: 100;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12rpx 0;
    
    .tab-icon {
      font-size: 44rpx;
      margin-bottom: 6rpx;
      color: #aaa;
    }
    
    .tab-text {
      font-size: 24rpx;
      color: #999;
    }
    
    &.active {
      .tab-icon {
        color: #ff5c8d;
      }
      
      .tab-text {
        color: #ff5c8d;
        font-weight: bold;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: linear-gradient(to right, #ff7eb3, #ff4d8d);
        border-radius: 2rpx;
      }
    }
  }
}

/* 新增样式 */
.batch-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 101;
}

.select-all {
  display: flex;
  align-items: center;
}

.select-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-right: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  
  &.selected {
    background-color: #ff6b9d;
    border-color: #ff6b9d;
    
    &::after {
      content: '';
      width: 18rpx;
      height: 10rpx;
      border-left: 2rpx solid #fff;
      border-bottom: 2rpx solid #fff;
      transform: rotate(-45deg) translate(2rpx, -2rpx);
    }
  }
}

.delete-btn {
  padding: 12rpx 40rpx;
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  
  &.disabled {
    opacity: 0.5;
    background: #ccc;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 107, 157, 0.2);
  border-top: 4rpx solid #ff6b9d;
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 20rpx;
  
  &.small {
    width: 30rpx;
    height: 30rpx;
    border-width: 2rpx;
    margin-bottom: 0;
    margin-right: 10rpx;
  }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.try-button {
  padding: 15rpx 50rpx;
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  box-shadow: 0 4rpx 10rpx rgba(255, 77, 125, 0.2);
}

.loading-more, .no-more-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 